import React, {Component} from 'react'
import Item from '../Item'
import PubSub from "pubsub-js";

import './index.scss'

export default class List extends Component {

    state = {todos: []}

    componentDidMount() {
        console.log("List:componentDidMount")
        PubSub.subscribe('addTodo', (_, data) => {
            this.addTodo(data)
        })
        PubSub.subscribe('deleteTodo', (_, data) => {
            this.deleteTodo(data)
        })
        PubSub.subscribe('updateTodo', (_, data) => {
            this.updateTodo(data.id, data.done)
        })
        PubSub.subscribe('updateAllTodoDone', (_, data) => {
            this.updateAllTodoDone(data)
        })
        PubSub.subscribe('clearAllDone', () => {
            this.clearAllDone()
        })
    }

    componentWillUnmount() {
        console.log("List:componentWillUnmount")
        PubSub.clearAllSubscriptions()
    }

    addTodo = (todoObj) => {
        const {todos} = this.state
        const flag = todos.some(todo => todo.name === todoObj.name);
        if (flag) {
            return alert('名称重复')
        }
        this.setState({todos: [todoObj, ...todos]})
    }

    deleteTodo = (id) => {
        const {todos} = this.state
        const newTodos = todos.filter((todoObj) => {
            return todoObj.id !== id
        })
        this.setState({todos: newTodos})
    }

    updateTodo = (id, done) => {
        const {todos} = this.state
        const newTodos = todos.map((todoObj) => {
            if (todoObj.id === id) return {...todoObj, done}
            else return todoObj
        })
        this.setState({todos: newTodos})
    }

    updateAllTodoDone = (done) => {
        const {todos} = this.state
        const newTodos = todos.map((todoObj) => {
            return {...todoObj, done}
        })
        this.setState({todos: newTodos})
    }

    clearAllDone = () => {
        const {todos} = this.state
        const newTodos = todos.filter((todoObj) => {
            return !todoObj.done
        })
        this.setState({todos: newTodos})
    }


    render() {
        const {todos} = this.state
        PubSub.publish('todo_data', this.state)
        return (
            <ul className='todo-main'>
                {
                    todos.map(todo => {
                        return <Item key={todo.id} {...todo} />
                    })
                }
            </ul>
        )
    }
}
